<template>
  <div class="detail">
    <v-app-bar color="deep-purple accent-4" dense dark>
      <v-btn icon @click="$router.back()">
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      <v-toolbar-title>购物车</v-toolbar-title>
    </v-app-bar>
    <ul class="list mt-1">
      <!-- <van-swipe-cell>@click="checkProductor(k)" -->

      <li class="item df mx-1 px-1" v-for="(v,k) in car" :key="k">
        <input type="checkbox" :checked="v.checked" v-model="v.checked" />
        <img class="item-cover pa-1" :src="v.img" alt />
        <div class="title df df1">
          <div>
            <div class="d-inline-block text-truncate" style="width:120px">{{v.name}}</div>
            <div>
              <h4 style="font-size:12px;color:red;">{{v.CNY/100}}元 {{v.point}}积分</h4>
            </div>
          </div>
          <div class="item-right">
            <div class="df num-control">
              <div @click="reduceNum(k)" style="margin-bottom:2px">-</div>
              <div>{{v.sum}}</div>
              <div @click="addNum(k)">+</div>
            </div>
            <v-btn small color="success mx-auto" @click="removeProdutor(k)">删除</v-btn>
          </div>
        </div>
      </li>
    </ul>
    <div class="total text-right">
      总计：{{money.CNY/100}}元 {{money.point}}积分
      <VBtn rounded :disabled="send" @click="subOrder" color="success">提交订单</VBtn>
      <!-- <van-popup v-model="show" overlay round position="bottom" style="{ height:9.2857rem }">
        <v-card class="mx-auto" max-width="400">
          <v-list>
            <v-list-item-group mandatory color="indigo">
                <v-list-item exact replace :key="i" @click="wxPay">
                  <img src="../../assets/icon/wechart.svg" style="width:50px;height:50px" alt />
                  <v-list-item-content>
                    <v-list-item-title v-text="微信支付"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              <v-list-item  exact replace :key="i" :to="item.pay">
                <img :src="item.icon" style="width:50px;height:50px" alt />
                <v-list-item-content>
                  <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card>
      </van-popup>-->
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      send: false,
      show: false
    };
  },
  computed: {
    ...mapState({
      car: state => state.car.list
    }),
    ...mapGetters(["checkedList", "money"])
  },
  created() {
    document.title = "购物车";
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  },
  methods: {
    // 数据提交
    subOrder() {
      this.send = true;
      let items = [];
      for (let i = 0; i < this.car.length; i++) {
        if (this.car[i].checked)
          items.push({
            ID: this.car[i].ID,
            name: this.car[i].name,
            sum: this.car[i].sum,
          });
      }
      const d = {
        cmd: 2,
        val: {
          token: localStorage.token,
          table: "orders",
          items: items
        }
      };
      this.$axios.post("q.php", d).then(a => {
        // console.log(a.data);
        if (a.data.result) {
          localStorage.removeItem('car');
          this.$router.push("/order");
        } else {
          (this.send = false),
            Notify({ type: "warning", message: "网络繁忙请稍后再试" });
        }
      });
    },
    // 支付
    async aliPay() {},
    wxPay() {},
    // 弹出层
    // showPopup() {
    //   this.show = true;
    // },
    // 购物车
    ...mapActions(["rmProdutor"]),
    checkProductor(k) {
      this.$store.dispatch("checkProductor", k);
    },
    removeProdutor(k) {
      this.rmProdutor(k);
    },
    addNum(k) {
      this.$store.dispatch("addNum", k);
    },
    reduceNum(k) {
      this.$store.dispatch("reduceNum", k);
    }
  }
};
</script>
<style>
.detail {
  width: 100%;
  min-height: 100vh;
}
.delete-button {
  height: 100%;
}
.df {
  display: flex;
}
.df1 {
  flex: 1;
}
.detail-name {
  margin-bottom: 40px;
  text-align: left;
  margin-left: 20px;
}
.mycar {
  text-align: right;
  padding-right: 20px;
  margin-bottom: 40px;
}
.list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list .item {
  width: 100%;
  height: 100px;
  border: 1px solid #b2b2b2;
  border-radius: 6px;
  margin-bottom: 25px;
  align-items: center;
}
.item-cover {
  width: 90px;
  height: 100%;
  border-radius: 6px 0 0 6px;
}
.title {
  justify-content: space-between;
  align-items: center;
}
.disc {
  width: 20px;
  height: 20px;
  background: #eee;
  border-radius: 50%;
  margin: 0 10px;
}
.disc-show {
  background: #33c9d4;
}
.item-right {
  color: #33c9d4;
}
.num-control {
  width: 60px;
  justify-content: space-around;
  align-items: center;
}
.total {
  width: 100vw;
  height: 40px;
  background: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 5px;
  right: 5px;
}
.v-application ol,
.v-application ul {
  padding-left: 0px;
}
</style>

